<template>
  <div class="common-container">
    <main-title>
      <el-button class="btn-add" type="primary" size="small" @click="addInit">新菜单</el-button>
    </main-title>

    <div class="content-wrap">
      <div class="search-wrap">
        <el-row type="flex" justify="space-between" class="common-search ym-box">
          <el-form class="common-form" :inline="true" :model="state.queryForm" @submit.prevent>
            <!-- <el-form-item label>
              <el-select v-model="state.queryForm.appId" placeholder="请选择" @change="search">
                <el-option
                  v-for="item in state.appOptions"
                  :key="item.code"
                  :label="item.value"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>-->
            <el-form-item label class="w-auto">
              <search-input
                v-model="state.queryForm.title"
                placeholder="输入菜单名称查询"
                @search="search"
              />
            </el-form-item>
          </el-form>
        </el-row>
        <refresh-btn @refresh="search" />
      </div>
      <div class="table-wrap ym-box">
        <ym-table
          v-loading="state.tableLoading"
          :column-data="columnData"
          :table-data="state.tableData"
          row-key="mid"
          :expand-row-keys="state.expandRowKeys"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          :style="{ height: `${tableHeight}px` }"
          :height="tableHeight"
        >
          <template #operator="slotProps">
            <el-button type="text" class="btn-edit" @click="editInit(slotProps.row)"
              >修改</el-button
            >
            <el-button type="text" class="btn-del" @click="del(slotProps.row)">删除</el-button>
          </template>
        </ym-table>
      </div>
    </div>

    <drawer
      v-model:visible="state.dialogVisible"
      :size="800"
      :title="state.dialogTitle"
      @close="closeDrawer"
    >
      <add-or-edit-form
        ref="formWrapper"
        :form="state.menuForm"
        :upper-options="state.upperOptions"
        :is-add="state.isAdd"
        :loading="state.dialogLoading"
        @cancel="cancel"
        @confirm="confirm"
      />
    </drawer>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

import { ElMessage } from 'element-plus'

import AddOrEditForm from './components/AddOrEditForm.vue'
import RefreshBtn from '@/components/CommonSearch/RefreshBtn/index.vue'
import SearchInput from '@/components/CommonSearch/SearchInput/index.vue'

import { getByDictCodeList } from '@/api/backend/dict'
import MenuApi from '@/api/backend/menu'

import { useTable } from '@/utils/common'
import { useConfirm } from '@/utils/common/useConfirm'

import tableOptions from '&/mixins/tableOptions'
import { Drawer, MainTitle, YmTable } from '&/mixins/useComponent'
import IBaseObj from '#/index'

const { tableHeight } = useTable(tableOptions)

const columnData = [
  {
    prop: 'mid',
    label: 'ID',
  },
  {
    prop: 'title',
    label: '菜单名称',
  },
  {
    prop: 'icon',
    label: '图标地址',
  },
  {
    prop: 'path',
    label: '页面地址',
  },
  {
    prop: 'createTime',
    label: '创建时间',
  },
]

const state: IBaseObj = reactive({
  queryForm: {
    title: '',
  },
  appOptions: [],
  tableData: [],
  tableLoading: false,
  menuForm: {
    title: '',
    parentId: '',
    path: '',
    remark: '',
    component: '',
    redirect: '',
    icon: '',
    visible: true,
    noCache: true,
    type: 'M',
  },
  dialogVisible: false,
  dialogTitle: '',
  isAdd: true,
  dialogLoading: false,
  expandRowKeys: [],
  upperOptions: [],
})

const search = async () => {
  state.tableLoading = true
  const ret = await MenuApi.getMenuTree({ title: state.queryForm.title })
  state.tableLoading = false
  if (ret.data) {
    state.tableData = ret.data
    ret.data.length > 0 && (state.expandRowKeys = [ret.data[0].mid + ''])
  } else {
    state.tableData = []
  }
}

const getMenuList = async () => {
  const ret = await MenuApi.getMenuList()
  state.upperOptions = ret || []
}

const init = () => {
  search()
  getMenuList()
}

init()

const addInit = () => {
  state.dialogTitle = '创建菜单'
  state.dialogVisible = true
  state.isAdd = true
}

const editInit = async (row: IBaseObj) => {
  state.dialogTitle = '修改菜单'
  state.dialogVisible = true
  state.isAdd = false
  Object.keys(state.menuForm).forEach((key: string) => {
    state.menuForm[key] = row[key]
  })
  state.menuForm.mid = row.mid
  // state.menuForm = { ...row }
}

const formWrapper = ref()
const addOrEditReset = () => {
  formWrapper.value.clear()
  state.menuForm = {
    title: '',
    parentId: '',
    path: '',
    remark: '',
    component: '',
    redirect: '',
    icon: '',
    visible: true,
    noCache: true,
    type: 'M',
  }
}

const closeDrawer = () => {
  state.isAdd = true
  addOrEditReset()
}

const cancel = () => {
  state.dialogVisible = false
}

const confirm = () => {
  state.dialogVisible = false
  search()
}

const del = (row: IBaseObj) => {
  useConfirm(
    {
      message: '此操作将永久删除该菜单，是否继续?',
    },
    async () => {
      const res = await MenuApi.delMenu(row.mid)

      const { data } = res
      if (data) {
        ElMessage({ message: '删除成功!', type: 'success', duration: 1500 })
        search()
      }
    }
  )
}
</script>

<style lang="scss" scoped>
:deep() {
  .ym-table {
    &.el-table {
      td {
        border: 1px solid var(--table-border);
      }
    }
  }
}

.search-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
